<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :title="scrollTop>0?'券详情':''" :navbarType='scrollTop>0?0:5'></wlk-navbar>
        <view class="detail-content relative bgw shadow pd30" v-if="!loading">
            <view class="wlkflex">
                <u-avatar :src="initMain.logo"></u-avatar>
                <view class="ml15 system-name bold">{{initMain.system_name}}</view>
            </view>
            <u-divider></u-divider>
           <view class="name center bold">{{item.coupon_info.name}}</view>
            <block v-if="item.coupon_info.sale_type=='deduct'">
                <view class="money bold center">
                    <text class="unit">￥</text>
                    {{item.coupon_info.deduct}}
                </view>
            </block>
            <block v-else>
                <view class="money bold center">{{item.coupon_info.discount}}
                    <text class="unit">折</text>
                </view>
            </block>
            <view class="mt20">
                <u-button :customStyle="{
			        borderRadius:'50px',
			        width:'52%'
                }" color="linear-gradient(to right, #fd3f01, #fd5800, #fd6c00, #fd7e0a, #fd8e18)" :disabled="item.status!=0"  size="large" @click="submit" :text="btnText"></u-button>
            </view>
            <u-divider></u-divider>
            <view class="info mt30">
                <view class="wlkflex">
                    <view class="title col9">有效期至：</view>
                    <view class="input mt05">{{$u.timeFormat(item.endtime, 'yyyy-mm-dd')}}</view>
                </view>
                <view class="wlkflex mt30">
                    <view class="title col9">适用品类：</view>
                    <view class="input mt05">{{item.coupon_info.apply_text}}</view>
                </view>
                <view class="wlkflex mt30">
                    <view class="title col9">使用条件：</view>
                    <view class="input mt05" v-if="item.coupon_info.enough>0">满{{item.coupon_info.enough}}元可用</view>
                    <view class="input mt05" v-else>无门槛</view>
                </view>
                <view class="mt30">
                    <view class="title col9">使用说明：</view>
                    <view class="mt05">
                        <u-parse :content="item.coupon_info.content" :selectable="true"></u-parse>
                    </view>
                </view>
            </view>

	    </view>
	</view>
</template>

<script>
    var _self;
    import share from "@/wlkutils/share";
    import { mapGetters} from 'vuex';
    import platform from "@/wlkutils/platform";
    import { formatRichText,toUrl, toWork } from '@/wlkutils/tools';
	export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty','isLogin','initMain']),
        },
		data() {
			return {
                scrollTop:0,
				id:'',
                item:{},
                loading:true,
                btnText:'',
			};
		},
        watch:{
            isLogin(val){
                this.getData();
            }
        },
        onLoad(options) {
            _self = this;
            _self.id = this.$Route.query.id;
        },
        onShow() {
            if(_self.id>0){
                this.getData();
            }
        },
        onPageScroll : function(e) {
            _self.scrollTop = e.scrollTop;
        },
        methods: {
            getData(){
            uni.$u.http.post('coupon/getUserDetail', {
                id:this.id
            }).then(res => {
                _self.item = res.data.item;
                if (!uni.$u.test.isEmpty(_self.item.coupon_info.content)) {
                    _self.item.coupon_info.content = formatRichText(_self.item.coupon_info.content);
                }
                switch (_self.item.status) {
                    case '-1':
                        _self.btnText = '已过期';
                        break;
                    case '0':
                        _self.btnText = '立即使用';
                        break;
                    case '1':
                        _self.btnText = '已使用';
                        break;
                }
                _self.loading = false;
            }).catch(res => {

            })
            },
            submit(){
                if(this.item.status == 0){
                    toUrl('/pages/goods/list')
                }
            }
        }
	}
</script>

<style lang="scss">
    page{
        background-image: radial-gradient(circle, #1a3387, #505da6, #7f8ac4, #b0b9e2, #e4eaff);
        height: 100%;
       .detail-content{
           width: 92%;
           margin: 0 auto;
           margin-top: 150rpx;
           border-radius: 20rpx;
           .system-name{
               font-size: $font-lg;
           }
           .name{
               font-size: $font-max;
           }
           .money{
               font-size: 70rpx;
               color: #F24544;
               margin-top: 50rpx;
               .unit{
                   font-size: $font-max;
               }
           }
           .info{
               font-size: $font-base;
           }
           .title{

           }
           .input{

           }
       }
    }
</style>
